<template>
  <Main>
    <template #table>
      <GTable
          :columns="columns"
          :data="tableData"
          :total="total"
          :loading="loading"
          @sizeChange="sizeChange"
          @currentChange="currentChange"
          @prevClick="prevClick"
          @nextClick="nextClick" >
<!--        订单状态-->
        <template #status="{ row }">
          <el-tag v-if="row.status === 1">待付款</el-tag>
          <el-tag v-else-if="row.status === 2" type="info">待派送</el-tag>
          <el-tag v-else-if="row.status === 3" type="success">已派送</el-tag>
          <el-tag v-else-if="row.status === 4" type="warning">已完成</el-tag>
          <el-tag v-else type="danger">已取消</el-tag>
        </template>
        <template #orderTime="{ row }">
          <span v-if="row.orderTime">
            {{ row.orderTime.split('T')[0] + ' ' + row.orderTime.split('T')[1] }}
          </span>
        </template>
        <!--        操作-->
        <template #general = "{ row }">
          <el-button size="small" round type="primary" @click="lookOrder(row)">查看</el-button>
          <el-button size="small" round type="danger" @click="changeOrderStatus(row)" v-if="row.status === 2">派送</el-button>
          <el-button size="small" round type="danger" @click="changeOrderStatus(row)" v-else-if="row.status === 3">完成</el-button>
        </template>
      </GTable>
    </template>
    <template #main-search>
      <div class="search-items">
        <el-input
            style="width: 300px"
            v-model="searchForm.number"
            size="large"
            placeholder="请输入订单号"
            @keyup.enter="searchData"
            :prefix-icon="Search"
        />
        <el-date-picker
            style="width: 300px;margin: 0 10px"
            v-model="searchForm.dateRange"
            size="large"
            type="daterange"
            value-format="YYYY-MM-DD"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
        <el-button type="warning" @click="searchData">查询</el-button>
      </div>
    </template>
  </Main>
<!--  详情弹窗-->
  <Window @closeWin="closeWin" :showFooter="false"  :page="page" :windowHeight="'35%'" :isShowWindow="isShowWindow" :winTitle="winTitle">
    <template #form>
      <div class="orderDetail-content">
        <div class="items-order" v-for="(item,index) in formProps" :key="index">
          <span>{{ item.label }}</span><span>{{ item.value }}</span>
        </div>
      </div>
    </template>
  </Window>
</template>

<script setup name="OrderDetail">
import { reactive, ref } from "vue";
import { Search } from '@element-plus/icons-vue';
import { useOrderTableData } from "./useOrderTableData";
import Window from '../../components/window.vue'
let page = ref('view')
let searchForm = reactive({
  number: null,
  dateRange: null
})
const { columns, tableData, getTableData, total , sizeChange, currentChange, prevClick, nextClick,isShowWindow ,lookOrder,winTitle,formProps, changeOrderStatus, loading} = useOrderTableData()
function searchData () {
  getTableData({ number: searchForm.number, beginTime: searchForm.dateRange ? searchForm.dateRange[0] : null , endTime: searchForm.dateRange ? searchForm.dateRange[1] : null })
}
function closeWin () {
  isShowWindow.value = false
}
</script>

<style scoped>
.search-items {
  width: 60%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}
.items-order {
  display: flex;
  justify-content: flex-start;
  margin: 10px;
}
</style>
